import React, { useMemo, useState } from 'react'
import './index.scss'
import { useLocation, useNavigate } from 'react-router-dom'
import { NavBar, Tag } from 'antd-mobile';
import { ProductCard } from 'react-vant';

const seatData = Array.from({ length: 50 }, (_, ind) => {
  return {
    id: `D${ind + 1}`,
    state:
      ind === 1 || ind === 20 || ind === 35 || ind === 49
        ? 'selectseat'
        : ind % 3 === 0
          ? 'booked'
          : 'available'
  }
})
function Index() {
  const navigate = useNavigate()
  const { state } = useLocation()
  const [seat, setSeat] = useState(seatData)

  const handleseat = (id) => {
    setSeat((prev) => {
      return prev.map((item) => {
        if (item.state !== 'booked' && item.id === id) {
          return {
            ...item,
            state: item.state === 'selectseat' ? 'available' : 'selectseat'
          }
        }
        return item
      })
    })
  }

  const getSeat = useMemo(() => {
    return seat.filter((item) => item.state === 'selectseat')
  }, [seat])

  const allprice = getSeat.length * state.price

  const handleorder = () => {
    navigate(`/order?allprice=${allprice}`, { state: state })
  }
  return (
    <div>
      <NavBar onBack={() => navigate(-1)}>我要预订</NavBar>
      <div>
        <ProductCard
          num={state.date}
          price={<Tag round color='#2db7f5'>
            ￥{state.price}
          </Tag>}
          desc={state.title}
          title={state.id}
          thumb={state.image}
        />
      </div>
      <div className='seat-wroe'>
        {
          seat.map((item, ind) => (
            <div
              key={ind}
              className={`seat-item seat-item-${item.state}`}
              onClick={() => handleseat(item.id)}
            >
              {item.state === 'selectseat' && <b>{item.id}</b>}
            </div>
          ))
        }
      </div>
      <div className='center1'>
        <div className='textw'>
          <span className='seatcolor1'></span>
          <span>预订</span>
        </div>
        <div className='textw'>
          <span className='seatcolor2'></span>
          <span>可选</span>
        </div>
        <div className='textw'>
          <span className='seatcolor3'></span>
          <span>已选</span>
        </div>
      </div>
      <div className='center'>
        <span>已选:{getSeat.length}</span>
        <span>{getSeat.map((item) => item.id).join('、')}</span>
      </div>
      <div className='bottom-wroe' onClick={() => handleorder()}>
        确定
      </div>
    </div>
  )
}

export default Index
